<script  lang="ts" setup>
import { Api } from "@/apis";
import router from "@/router";
import { SerializeDetailDataType } from "@/typing";
import { ref, toRefs, onMounted } from "vue";

let serializeList = ref<Array<SerializeDetailDataType>>();

const props = defineProps<{
    year: number
}>()

const { year } = toRefs(props)

onMounted(async () => {
    const data = await Api.getSerialYearList(year.value);
    serializeList.value = data.data.data;
})

function goToSerializeBook(id: string) {

    router.push({
        name: 'book',
        query: { id }
    })
}

</script>

<template>
    <div class="p-8">
        <div v-for="(l, i) in serializeList" :key="i" class="shadow-md bottom-border"
            @click="goToSerializeBook(String(l.serial_id))">
            <div class="relative text-white">
                <div class="absolute top-5 left-8">{{ l.finished ? '# 已完结' : '# 连载中' }}</div>
                <img class="serialize-img" :src="l.cover" alt="img" />
                <div class="absolute bottom-5 left-3 text-3xl">《 {{ l.title }} 》</div>
            </div>
            <div class="bg-white mb-10 p-5 text-gray-400 bottom-border">
                <div class="text-gray-500 mb-3 serialize-title ">{{ l.forward }}</div>
                <div>{{ l.subtitle }}</div>
            </div>
        </div>
    </div>
</template>